<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生个人主页</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        .container {
            display: none;
        }

        #content1 {
            display: block;
        }
    </style>
</head>

<body>
    <ul class="nav justify-content-center">
        <ul class="nav justify-content-end">
            {% if success_message %}
            <div class="alert alert-success" role="alert">
                {{ success_message }}
            </div>
            {% endif %}
            <li class="nav-item">
                <h2 style="color: green;">学生个人主页</h2>
            </li>
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="{% url 'stu_index' %}" id="stu_info"
                    onclick="showContent('content1')">复试信息填写</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'check_result' %}" id="stu_after_info" onclick="showContent('content2')">查看复试结果</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}" id="stu_after_info">主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">你好！ {{ student_info.name }}</a>
            </li>
        </ul>
    </ul>
    <div id="main">
        {% if message %}
        <p>{{ message }}</p>
        {% endif %}
    </div>
    <div class="container" id="content1">
        <form id="studentInfoForm" method="post" onsubmit="return submitForm(event)">
            {% csrf_token %}
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">考生姓名</span>
                <input type="text" name="name" class="form-control" placeholder="姓名" aria-label="姓名"
                    value="{{ student_info.name }}">
                <span class="input-group-text" id="basic-addon4">考生准考证号</span>
                <input type="text" name="stu_no" class="form-control" placeholder="准考证号" aria-label="准考证号"
                    value="{{ student_info.stu_no }}">
            </div>
            <div class="input-group mb-3">
                <label class="input-group-text" for="inputGroupSelect01">性别</label>
                <select name="gender" class="form-select" id="inputGroupSelect03">
                    <option selected value="{{ student_info.gender }}">{{ student_info.gender }}</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
                <span class="input-group-text" id="basic-addon9">复试学科专业</span>
                <input type="text" name="major" class="form-control" placeholder="填写专业"
                    value="{{ student_info.major }}">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon5">本科毕业学校</span>
                <input type="text" name="graduation_school" class="form-control" placeholder="学校名称"
                    value="{{ student_info.graduation_school }}">
                <span class="input-group-text" id="basic-addon15">本科毕业时间</span>
                <input type="text" name="graduation_time" class="form-control" placeholder="XXXX-XX-XX"
                    value="{{ student_info.graduation_time }}">
                <span class="input-group-text" id="basic-addon6">毕业专业</span>
                <input type="text" name="graduation_major" class="form-control" placeholder="专业名称"
                    value="{{ student_info.graduation_major }}">
            </div>

            <div class="input-group mb-3">
                <label class="input-group-text" for="inputGroupSelect01">考生类型</label>
                <select name="stu_type" class="form-select" id="inputGroupSelect02">
                    <option selected value="{{ student_info.stu_type }}">{{ student_info.stu_type }}</option>
                    <option value="1">应届生</option>
                    <option value="2">往届生</option>
                    <option value="3">同等学力</option>
                </select>
                <select name="category" class="form-select" id="inputGroupSelect01">
                    <option selected value="{{ student_info.category }}">{{ student_info.category }}</option>
                    <option value="1">定向生</option>
                    <option value="2">非定向生</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="basic-url" class="form-label">考生联系方式</label>
                <div class="input-group">
                    <span class="input-group-text" id="basic-addon3">手机</span>
                    <input name="contact_phone" type="text" class="form-control" id="basic-url"
                        value="{{ student_info.contact_phone }}">
                    <span class="input-group-text" id="basic-addon7">紧急联系人手机</span>
                    <input name="emergency_contact_phone" type="text" class="form-control"
                        value="{{ student_info.emergency_contact_phone }}">
                </div>
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text">报考导师优先意向</span>
                <input name="preferred_mentor_1" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.preferred_mentor_1 }}">
                <input name="preferred_mentor_2" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.preferred_mentor_2 }}">
                <input name="preferred_mentor_3" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.preferred_mentor_3 }}">
            </div>

            <div class="mb-3">
                <label for="basic-url" class="form-label">以下信息仅由报考计算机科学与技术考生填写</label>
                <div class="input-group">
                    <span class="input-group-text">拟报研究方向</span>
                    <input name="research_direction" type="text" class="form-control"
                        value="{{ student_info.research_direction }}">
                </div>
            </div>

            <label for="basic-url" class="form-label">以下信息仅由报考电子信息考生填写</label>
            <div class="input-group mb-3">
                <label class="input-group-text">是否接受专业调整</label>
                <select name="accept_adjustment" class="form-select">
                    <option selected value="{{ student_info.accept_adjustment }}">{{ student_info.accept_adjustment }}
                    </option>
                    <option value="1">接受</option>
                    <option value="2">不接受</option>
                </select>
            </div>

            <label for="basic-url" class="form-label">除一志愿方向外电子信息下其他方向调整的优先顺序</label>
            <div class="input-group mb-3">
                <input name="adjustment_order_1" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.adjustment_order_1 }}">
                <input name="adjustment_order_2" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.adjustment_order_2 }}">
                <input name="adjustment_order_3" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.adjustment_order_3 }}">
                <input name="adjustment_order_4" type="text" class="form-control" placeholder="*"
                    value="{{ student_info.adjustment_order_4 }}">
            </div>

            <input type="hidden" name="state" value="{{ student_info.state }}">
            <button class="w-100 btn btn-lg btn-primary" type="submit" style="background-color: green">提交</button>
        </form>
        <div id="submitMessage" class="mt-3"></div>
    </div>

    <script src="../static/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery -->

    <script>
        // 显示内容
        function showContent(contentId) {
            var contents = document.querySelectorAll('.container');
            contents.forEach(function (content) {
                content.style.display = 'none';
            });

            var content = document.getElementById(contentId);
            if (content) {
                content.style.display = 'block';
            }
        }
        function disableFormElements() {
            // 获取所有input和select元素
            var inputs = document.querySelectorAll('input, select');

            inputs.forEach(function (element) {
                if (element.tagName.toLowerCase() === 'input') {
                    element.readOnly = true; // 设置input为只读
                } else if (element.tagName.toLowerCase() === 'select') {
                    element.disabled = true; // 禁用select
                }
            });
        }
        document.addEventListener('DOMContentLoaded', function () {
            // 获取隐藏的state输入值
            var stateInput = document.querySelector('input[name="state"]');

            if (stateInput && stateInput.value === "1") {
                disableFormElements(); // 如果state为1，禁用所有表单元素
            }
        });
        // 提交表单
        function submitForm(event) {
            event.preventDefault(); // 阻止默认表单提交
            $('#submitMessage').html(''); // 清空之前的消息

            // 获取输入的值
            var researchDirection = $('input[name="research_direction"]').val();
            var acceptAdjustment = $('select[name="accept_adjustment"]').val();

            // 检查必填项
            if (!$('input[name="name"]').val() || !$('input[name="stu_no"]').val()) {
                $('#submitMessage').html('<div class="alert alert-danger" role="alert">姓名和准考证号是必填项！</div>');
                return; // 停止提交
            }

            // 检查是否接受专业调整和拟报研究方向不能同时填写
            if (researchDirection && acceptAdjustment) {
                alert('拟报研究方向和是否接受专业调整不能同时填写！'); // 弹窗提示
                return; // 停止提交
            }
            function disableFormElements() {
                // 获取所有input和select元素
                var inputs = document.querySelectorAll('input, select');

                inputs.forEach(function (element) {
                    if (element.tagName.toLowerCase() === 'input') {
                        element.readOnly = true; // 设置input为只读
                    } else if (element.tagName.toLowerCase() === 'select') {
                        element.disabled = true; // 禁用select
                    }
                });
            }
            // 通过AJAX提交表单
            $.ajax({
                type: 'POST',
                url: 'http://127.0.0.1:8000/input_stu_info/',
                data: $('#studentInfoForm').serialize(), // 序列化表单数据
                success: function (response) {
                    // 检查后端返回的JSON格式
                    if (response.success_message) {
                        $('#submitMessage').html('<div class="alert alert-success" role="alert">' + response.success_message + '</div>');
                    } else if (response.error_message) {
                        $('#submitMessage').html('<div class="alert alert-danger" role="alert">' + response.error_message + '</div>');
                    }
                },
                error: function (xhr) {
                    console.error('AJAX error:', xhr); // 更详细的错误记录
                    var errorMessage = '未知错误';
                    // 通过查看服务器返回的状态来提供更好的用户反馈
                    if (xhr.status === 400) {
                        errorMessage = xhr.responseJSON && xhr.responseJSON.error_message ?
                            xhr.responseJSON.error_message :
                            '提交的数据不符合要求';
                    } else if (xhr.status === 500) {
                        errorMessage = '服务器错误，请稍后再试';
                    }
                    $('#submitMessage').html('<div class="alert alert-danger" role="alert">' + errorMessage + '</div>');
                }
            });
        }
    </script>
</body>

</html>